<style>
  .textwrap {
    width: 100%;
    text-align: center;
    margin: 50px auto;
    padding: 10px;
    /* background-color: #ecf0f1; */
    /* border: 2px solid #3498db; */
  }
</style>

<div class="textwrap">
  <span class="textfit">这是一个很长的标题，它会根据容</span>
</div>

<br>

<div class="textwrap" style="width: 300px;">
  <span class="textfit">这是一个更小的容器，文字会缩放得更多。</span>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    debugger
    const INITIAL_FONT_SIZE = 320;
    const TOLERANCE = 10;

    const textwraps = document.querySelectorAll('.textwrap');
    const textElements = document.querySelectorAll('.textfit');

    // 设置容器样式
    textwraps.forEach((textwrap, index) => {
      // let width = '500px';
      // if (index === 1) {
      //   width = '300px';
      // }
      // width: ${ width };
      // margin: 50px auto;
      // padding: 10px;
      // border: 2px solid #3498db;
      // background - color: #ecf0f1;
      // text - align: center;

      textwrap.style.cssText = `
    
          box-sizing: border-box;
        `;
    });

    // 设置文字元素样式
    textElements.forEach(element => {
      element.style.cssText = `
          font-size: ${INITIAL_FONT_SIZE}px;
          font-weight: bold;
          color: #FF80DD;
          white-space: nowrap;
          overflow: hidden;
          display: inline-block;
          line-height: 1.2;
        `;
    });

    // 动态缩放文字的核心函数
    function fitText() {
      textElements.forEach(textElement => {
        const textwrap = textElement.parentElement;
        const textwrapWidth = textwrap.offsetWidth - parseFloat(getComputedStyle(textwrap).paddingLeft) - parseFloat(getComputedStyle(textwrap).paddingRight);

        textElement.style.fontSize = `${INITIAL_FONT_SIZE}px`;
        const textWidth = textElement.scrollWidth;

        if (textWidth === 0) {
          return;
        }

        if (textWidth > textwrapWidth + TOLERANCE) {
          const newFontSize = (textwrapWidth / textWidth) * INITIAL_FONT_SIZE;
          textElement.style.fontSize = `${newFontSize}px`;
        }
      });
    }

    // 注册事件监听器
    // 1. 页面加载完成时
    window.addEventListener('load', fitText);
    // 2. 窗口大小改变时（包括桌面端和移动端旋转）
    window.addEventListener('resize', fitText);
    // 3. 字体加载完成时（确保在外部字体加载后计算正确）
    window.addEventListener('fontresize', fitText);

    // 监听DOM变化，确保文字内容动态更新时也能正确缩放
    const observer = new MutationObserver(fitText);
    const config = { childList: true, subtree: true, characterData: true };
    textElements.forEach(element => observer.observe(element, config));

    // 立即执行一次，确保初始状态正确
    fitText();
  });
</script>

</body>

</html>